<template>
	<div class="type">
		<!-- type区域 -->
		<div class="type_title">
			<h3>类型管理</h3>
			<button @click="bol = 3;obj.typeId = 0">添加</button>
		</div>
		<div class="type_mid">
			<div class="mid_left">
				<!-- <table border="1" cellpadding="0" cellspacing="0">
					<tr v-for="(item,index) in list" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.type}}</td>
						<td><button @click="update(index)">修改</button></td>
					</tr>
				</table> -->
				 <el-table :data="list" style="width: 80%;margin: 0 auto;">
				    <el-table-column prop="id" label="id" width="200" />
				    <el-table-column prop="type" label="类型" width="200" />
					<el-table-column label="操作" width="200">
						<el-button type="primary" @click="ab(list)">修改</el-button>
					</el-table-column>
				  </el-table>
			</div>
			<template v-if="bol == 1">
				<div class="mid_right">
					<h4>浏览中</h4>
					<p>
						<span>类型ID:</span>
						<input type="text" readonly="readonly" v-model.trim.lazy="obj.typeId">
					</p>
					<p>
						<span>类型名称:</span>
						<input type="text" v-model.trim.lazy="obj.typeName">
					</p>
					<button>浏览中 提交</button>
				</div>
			</template>
			<template v-if="bol == 2">
				<div class="mid_right">
					<h4>修改</h4>
					<p>
						<span>类型ID:</span>
						<input type="text" readonly="readonly" v-model.trim.lazy="obj.typeId">
					</p>
					<p>
						<span>类型名称:</span>
						<input type="text" v-model.trim.lazy="obj.typeName">
					</p>
					<button @click="updates()">修改 提交</button>
				</div>
			</template>
			<template v-if="bol == 3">
				<div class="mid_right">
					<h4>添加</h4>
					<p>
						<span>类型ID:</span>
						<input type="text" readonly="readonly" v-model.trim.lazy="obj.typeId" >
					</p>
					<p>
						<span>类型名称:</span>
						<input type="text" v-model.trim.lazy="obj.typeName">
					</p>
					<button @click="postData()">添加 提交</button>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	export default{
		name : 'Type',
		data(){
			return {
				list : [],
				con : '',
				bol : 1,
				obj : {
					typeId : '',
					typeName : ''
				}
			}
		},
		methods:{
			ab(val){
				console.log(val);
			},
			updates(){
				let that = this;
				if( this.obj.typeName != '' && this.obj.typeId !== '' ){
					// 发起post请求:请求地址+提交数据+表头配置
					/*
						请求地址: /api/type/add
						提交数据:
					*/
				   // 将提交的数据打包
				   let data = {
						id : this.obj.typeId,
						type : this.obj.typeName
				   }
					this.axios.post( '/api/adm/type/add' , this.$qs.stringify( data ) , {
						// 告知服务器本次请求的方式以及编码格式
						headers : { 'Content-Type' : 'application/x-www-form-urlencoded ; charset=UTF-8' }
					} ).then( (res)=>{
						if( res.status === 200 ){
							that.list = res.data.data;
						}
					} ).catch( (error)=>{
						console.log(error);
					} );
				}
				else{
					return false;
				}
			},
			update(val){
				this.con = val
				// console.log(val);
				this.obj.typeId = this.list[val].id;
				this.obj.typeName = this.list[val].type;
				this.bol = 2;
			},
			postData(){
				// 备份
				let that = this;
				// 判断不能为空
				if( this.obj.typeName != '' && this.obj.typeId !== '' ){
					// 发起post请求:请求地址+提交数据+表头配置
					/*
						请求地址: /api/type/add
						提交数据:
					*/
				   // 将提交的数据打包
				   let data = {
						id : this.obj.typeId,
						type : this.obj.typeName
				}
					this.axios.post( '/api/adm/type/add' , this.$qs.stringify( data ) , {
						// 告知服务器本次请求的方式以及编码格式
						headers : { 'Content-Type' : 'application/x-www-form-urlencoded ; charset=UTF-8' }
					} ).then( (res)=>{
						if( res.status === 200 ){
							that.list = res.data.data;
							// 清空输入框
							this.obj.typeId = '';
							this.obj.typeName = '';
						}
					} ).catch( (error)=>{
						console.log(error);
					} );
				}
				else{
					return false;
				}
			}
		},
		mounted(){
			this.axios.get( 'api/adm/type/findAll' ).then( (res)=>{
				this.list = res.data.data;
				// console.log(res.data.data);
			} ).catch( (error)=>{
				console.log(error);
			} );
		}
	}
</script>

<style scoped>
	.type .type_title h3{
		width: 20%;
		margin-left: 30px;
		font-size: 30px;
	}
	.type .type_title button{
		width: 100px;
		height: 35px;
		border-radius: 6px;
		border: 0;
		cursor: pointer;
		position: absolute;
		top: 10%;
		right: 5%;
	}
	.type .type_mid .mid_left{
		width: 50%;
		height: 100%;
		float: left;
	}
	.type .type_mid .mid_right{
		width: 50%;
		height: 100%;
		float: left;
		background-color: #ffffff;
	}
	.type .type_mid .mid_left table{
		width: 80%;
		/* background: url(../../../../public/xscn.png)no-repeat;
		background-size: 100% 100%; */
		margin: 0 auto;
		text-align: center;
	}
	.type .type_mid .mid_left table tr td{
		line-height: 50px;
	}
	.type .type_mid .mid_left table tr td:nth-child(3) button{
		width: 50%;
		line-height: 30px;
		border-radius: 6px;
		border: 0;
		background-color: #4169E1;
		color: white;
		font-size: 15px;
		cursor: pointer;
	}
	.type .type_mid .mid_right h4{
		margin-left: 15px;
		font-size: 16px;
	}
	.type .type_mid .mid_right p{
		line-height: 50px;
	}
	.type .type_mid .mid_right p span{
		margin-left: 5%;
		margin-right: 5%;
	}
	.type .type_mid .mid_right p:nth-child(2) span{
		margin-left: 8%;
	}
	.type .type_mid .mid_right p input{
		width: 50%;
		height: 30px;
		border-radius: 6px;
		border: 1px solid #D4D4D4;
		outline: none;
		text-indent: 1em;
	}
	.type .type_mid .mid_right button{
		width: 30%;
		height: 35px;
		border-radius: 6px;
		border: 0;
		background-color: #D4D4D4;
		color: white;
		cursor: pointer;
		margin-left: 40%;
		margin-bottom: 15px;
	}
	.type .type_mid .mid_right button:hover{
		background-color: pink;
	}
</style>
